<!-- fileName: NewsRadio -->
<template>
  <div>
    <entry-title>主播电台</entry-title>
    <div style="display: grid; grid-template-columns: repeat(5, 1fr)">
      <div :key="item.id" v-for="(item, index) in newsRadioList">
        <div style="position: relative;">
          <div class="nickName">
            <span>{{ item.name }}</span>
          </div>
          <div>
            <img
              :src="getViewImgUrl(item.picUrl + '?param=175y175')"
              style="width: 14vw; height: 14vw; border-radius: 5px"/>
          </div>
        </div>
        <div style="word-break:break-all; max-width: 14vw">
          <div style="margin-left: 5px; margin-top: 5px;">
            <span class="hoverText" style="font-size: 13px;">{{ item.rcmdtext }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { discoverApi } from '@/api/discover'

  export default {
    data() {
      return {
        newsRadioList: []
      }
    },
    created() {
      this.getNewsRadioList()

    },
    methods: {
      async getNewsRadioList() {
        // const { data: res } = await this.$http.get('https://autumnfish.cn/dj/hot?limit=5')
        discoverApi().getNewsRadioList({
          limit: 5
        }).then(res => {
          this.newsRadioList = res.djRadios
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .nickName {
    position: absolute;
    z-index: 5;
    top: 12vw;
    left: 5px
  }

  .nickName > span {
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
  }

  .hoverText {
    color: rgba(0, 0, 0, .8);
  }

  .hoverText:hover {
    color: rgba(0, 0, 0, 1);
  }
</style>
